<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AJAX-留言板</title>
    <link href="./assets/css/bootstrap.min.css" rel="stylesheet">
	<script src="./assets/js/vue.min.js"></script>
	<script src="./assets/js/axios.min.js"></script>
	<style>
	a{
		color:#333333;
		text-decoration: none;
	}
	a:hover{
		color:#3339;
		text-decoration: none;
	}
	</style>
  </head>
  <body>
    <div class="container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<h1>AJAX-留言板</h1>
				<hr/>
				<div id="comment_operation">
				<label for="comment">评论</label>
				<input type="text" class="form-control" id="comment" name="comment" placeholder="WDNMD" v-model="comment" required>
				<br>
				<div class="form-inline">
					<div class="form-group">
						<label for="vistor-name">姓名</label>
						<input type="text" class="form-control" id="vistorname" name="vistorname" placeholder="7gugu" v-model="vistorname" required>
					</div>
					<div class="form-group">
						<label for="email">电子邮箱</label>
						<input type="email" class="form-control" id="email" placeholder="gz7gugu@qq.com" v-model="email" required>
					</div>
					<button type="submit" class="btn btn-info" id="button_send" v-on:click="sendcomment()" v-bind:disabled="button_dis">发表评论</button>
				</div>
				</div>
				<hr/>
				<div id="comment_show">
				<!--状态提示-->
				<template v-if="alert_state=='info'">
					<div class="alert alert-info" role="alert">{{alert_data}}</div>
				</template>
				<template v-else-if="alert_state=='warning'">
					<div class="alert alert-warning" role="alert">{{alert_data}}</div>
				</template>
				<template v-else-if="alert_state=='success'">
					<div class="alert alert-success" role="alert">{{alert_data}}</div>
				</template>
				<template v-else-if="alert_state=='danger'">
					<div class="alert alert-danger" role="alert">{{alert_data}}</div>
				</template>
				<div v-if="comment_state">
					<div name="comment_show" v-for="(comment,i) in comments">
						<div class="col-md-2">
							<img  v-bind:src="avatar_link" alt="avatar" class="img-thumbnail" />
						</div>
						<div class="col-md-10">
							<h2><a href="mailto:{{comment[2]}}">{{comment[1]}}</a></h2>
							<h6>{{comment[4]}}</h6>
							<p>{{comment[3]}}</p>
						</div>
					</div>
				
					<nav style="float:right;">
						<ul class="pagination">
						<template v-if="show_pre">
							<li id="previous">
								<a v-on:click="page(pre_num);" id="previous_link" name="previous_link">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
						</template>
						<template v-else>
							<li id="previous" class="disabled">
								<a id="previous_link" name="previous_link" disabled=true>
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
						</template>
						<template v-if="show_next">
							<li id="next">
								<a v-on:click="page(next_num);" id="next_link" name="next_link">
									<span aria-hidden="true">&raquo;</span>
								</a>
							</li>
						</template>
							<template v-else>
								<li id="next" class="disabled">
									<a id="next_link" name="next_link" >
										<span aria-hidden="true">&raquo;</span>
									</a>
								</li>
							</template>
						</ul>
					</nav>
				</div>
			</div>
			</div>
		</div>
	</div>
  </body>
  <footer style="text-align:center;margin-left:auto;margin-right:auto;">
	Power By 7gugu
  </footer>
  <script>
	var formdata;
	var vue = new Vue({
		el:"#comment_show",
		data:{
			alert_state:0,
			alert_data:"评论装填中,请稍候..",
			comment_state:false,
			avatar_link:"https://secure.gravatar.com/avatar/8088cc2320104c3134031f33c98c592c?s=100&d=retro&r=x",
			comments:[],
			show_pre:true,
			show_next:true,
			pre_num:0,
			next_num:0,
		},
		methods:{
			page:function(num){
				formdata = new window.FormData()
				formdata.append("getcomment",num);
				axios.post('ajax.php',formdata,{headers:{"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'}})
				.then(function(response){
					if(response.data.status=="success"){
						vue.comment_state=true;
						for(var i=0;i<response.data.response.length;i++){
							Vue.set(vue.comments,i,response.data.response[i]);
						}
						vue.alert_state='';
					}else if(response.data.status=="danger"){
						vue.alert_state='warning';
						vue.alert_data="无评论,快来当楼主吧!";
						vue.comment_state=false;
					}
				}).catch(function (error) { 
				// 请求失败处理
				console.log(error);
				});
			formdata = new window.FormData()
			formdata.append("getpage",num);
			axios.post('ajax.php',formdata,{headers:{"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'}})
			.then(function(response){
				if(response.data.status=="success"){
					vue.pre_num=response.data.previous;
					vue.next_num=response.data.next;
				}else if(response.data.status=="danger"){
					vue.pre_num=0;
					vue.next_num=0;
					
				}
				vue.init();
			}).catch(function (error) { 
				// 请求失败处理
				console.log(error);
			});
			},  
			init:function(){
				if(this.pre_num==0){this.show_pre=false;}else{this.show_pre=true;}
				if(this.next_num==0){this.show_next=false;}else{this.show_next=true;}
			},
			getcomment:function(){
			formdata = new window.FormData()
			formdata.append("getcomment",this.pre_num+1);
			axios.post('ajax.php',formdata,{headers:{"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'}})
			.then(function(response){
				if(response.data.status=="success"){
					vue.comment_state=true;
					for(var i=0;i<response.data.response.length;i++){
						Vue.set(vue.comments,i,response.data.response[i]);
					}
					vue.alert_state='';
				}else if(response.data.status=="danger"){
					vue.alert_state='warning';
					vue.comment_state=false;
					vue.alert_data="无评论,快来当楼主吧!";
				}
			}).catch(function (error) { 
				// 请求失败处理
				console.log(error);
			});
			},
			getpage:function(){
			formdata = new window.FormData()
			formdata.append("getpage",this.pre_num+1);
			axios.post('ajax.php',formdata,{headers:{"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'}})
			.then(function(response){
				if(response.data.status=="success"){
					vue.pre_num=response.data.previous;
					vue.next_num=response.data.next;
				}else if(response.data.status=="danger"){
					vue.pre_num=0;
					vue.next_num=0;
					
				}
				vue.init();
			}).catch(function (error) { 
				// 请求失败处理
				console.log(error);
			});
			}
		},
		mounted (){
			axios.interceptors.request.use(function (config) {
				vue.alert_state='info';
				return config;
			});
			this.getcomment();
			this.getpage();
		}
	});
	var op = new Vue({
		el:"#comment_operation",
		data:{
			comment:"",
			vistorname:"",
			email:"",
			button_dis:false,
		},
		methods:{
			sendcomment:function(){
				console.log(this.comment);
				if(this.comment==""){
					vue.alert_state='warning';
					vue.alert_data="请输入评论!";
					return;
				}
				if(this.vistorname==""){
					vue.alert_state='warning';
					vue.alert_data="请输入姓名!";
					return;
				}
				if(this.email==""){
					vue.alert_state='warning';
					vue.alert_data="请输入邮箱地址!";
					return;
				}
				vue.alert_state='';
				vue.alert_data="";
				formdata = new window.FormData();
				formdata.append("sendcomment","true");
				formdata.append("comment",this.comment);
				formdata.append("vistorname",this.vistorname);
				formdata.append("email",this.email);
				vue.alert_data="评论发送中...";
				op.button_dis=true;
				axios.interceptors.request.use(function (config) {
					vue.alert_state='info';
				return config;
			});
				axios.post('ajax.php',formdata,{headers:{"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'}})
				.then(function(response){
					if(response.data.status=="success"){
						vue.alert_state='success';
						vue.alert_data="评论发送成功!";
						setTimeout(function(){
							vue.alert_state='';
							vue.alert_data='评论装填中,请稍候..';
							vue.pre_num=0;
							vue.getcomment();
						},3000);
					}else if(response.data.status=="danger"){
						vue.alert_state='danger';
						vue.alert_data="评论发送失败!";
					}
					op.button_dis=false;
			});
			},
		}
	});
  </script>
	<!-- 两个BUG鸣翠柳，一行代码上西天。 -->
</html>